<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>AI Talent Pro 2025 - 企业人才评估系统</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://code.iconify.design/3/3.1.1/iconify.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <link
      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&amp;display=swap"
      rel="stylesheet"
    />
    <style>
      body {
        font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
        background-color: #f7f9fc;
        margin: 0;
        padding: 0;
      }

      .container {
        max-width: 1440px;
        margin: 0 auto;
        display: flex;
        min-height: 100vh;
        flex-direction: column;
      }

      .card {
        background: white;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        padding: 24px;
        transition: transform 0.3s;
      }

      .card:hover {
        transform: translateY(-4px);
      }

      .nav-link:hover {
        color: #2d5bff;
      }

      .progress-bar {
        height: 8px;
        background: linear-gradient(90deg, #2d5bff, #00c48c);
        border-radius: 4px;
      }

      .ai-tag {
        display: inline-flex;
        align-items: center;
        padding: 4px 12px;
        border-radius: 20px;
        font-size: 12px;
        background: rgba(45, 91, 255, 0.1);
        color: #2d5bff;
      }

      .chart-container {
        width: 100%;
        height: 300px;
      }

      #kpi-chart,
      #radar-chart,
      #heatmap-chart {
        height: 100%;
        width: 100%;
      }

      /* 新增样式 */
      .feature-card {
        border-left: 4px solid #2d5bff;
        transition: all 0.3s ease;
      }

      .feature-card:hover {
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
        border-left-color: #00c48c;
      }

      .tab-button {
        padding: 10px 20px;
        border-radius: 6px;
        cursor: pointer;
        transition: all 0.3s ease;
      }

      .tab-button.active {
        background-color: #2d5bff;
        color: white;
      }

      .skill-tag {
        display: inline-block;
        padding: 4px 10px;
        background: #f0f5ff;
        border-radius: 16px;
        font-size: 12px;
        margin-right: 8px;
        margin-bottom: 8px;
      }

      .project-card {
        position: relative;
        overflow: hidden;
        transition: all 0.3s ease;
      }

      .project-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 4px;
        background: linear-gradient(90deg, #2d5bff, #00c48c);
      }

      .interview-avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: #e6f7ff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        color: #2d5bff;
      }

      .timeline-item {
        position: relative;
        padding-left: 30px;
        margin-bottom: 20px;
      }

      .timeline-item::before {
        content: "";
        position: absolute;
        left: 0;
        top: 5px;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: #2d5bff;
      }

      .timeline-item::after {
        content: "";
        position: absolute;
        left: 5px;
        top: 17px;
        width: 2px;
        height: calc(100% + 10px);
        background: #e8e8e8;
      }

      .timeline-item:last-child::after {
        display: none;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <!-- 顶部导航区 -->
      <header
        class="fixed-section bg-[#1A1F36] text-white h-20 flex items-center px-8"
      >
        <div class="flex items-center w-full">
          <div class="text-xl font-bold flex items-center">
            <span
              class="iconify mr-2"
              data-icon="carbon:ai-results-high"
              style="color: #2d5bff"
            ></span>
            九霄 Pro 2025
            <span class="text-sm bg-[#2D5BFF] rounded ml-3 px-2 py-1"
              >企业版 v3.5</span
            >
          </div>

          <nav class="flex space-x-8 mx-auto">
            <a
              href="#"
              class="nav-link font-medium text-white hover:text-blue-300"
              >评估中心</a
            >
            <a href="#" class="nav-link font-medium text-gray-300"
              >候选人管理</a
            >
            <a href="#" class="nav-link font-medium text-white">数据分析</a>
            <a href="#" class="nav-link font-medium text-gray-300">团队洞察</a>
            <a href="#" class="nav-link font-medium text-gray-300">学习路径</a>
            <a href="#" class="nav-link font-medium text-gray-300">项目测试</a>
          </nav>

          <div class="flex items-center space-x-6">
            <button class="relative">
              <span class="iconify text-xl" data-icon="mdi:bell-outline"></span>
              <span
                class="absolute top-0 right-0 w-2 h-2 rounded-full bg-[#FF647C]"
              ></span>
            </button>
            <button
              class="iconify text-xl"
              data-icon="mdi:cog-outline"
            ></button>
            <button
              class="iconify text-xl"
              data-icon="mdi:help-circle-outline"
            ></button>
            <div class="flex items-center cursor-pointer">
              <div
                class="bg-gray-200 border-2 border-dashed rounded-xl w-10 h-10"
              ></div>
              <span class="iconify ml-2" data-icon="mdi:chevron-down"></span>
            </div>
          </div>
        </div>
      </header>

      <!-- 主要内容区 -->
      <div class="flex flex-1 pt-20">
        <!-- 侧边栏 -->
        <aside
          class="fixed-section w-[280px] bg-white border-r border-gray-200 p-6 flex flex-col"
        >
          <div class="mb-10">
            <h3 class="text-[16px] font-semibold text-[#1A1F36] mb-4">
              快速评估
            </h3>
            <div class="space-y-3">
              <button
                class="w-full flex items-center text-left p-3 rounded-lg bg-[#2D5BFF]/5 text-[#2D5BFF]"
              >
                <span class="iconify mr-3" data-icon="carbon:ai"></span>
                AI智能评估
              </button>
              <button
                class="w-full flex items-center text-left p-3 rounded-lg hover:bg-gray-100"
              >
                <span
                  class="iconify mr-3"
                  data-icon="mdi:clipboard-text-outline"
                ></span>
                招聘简历
              </button>
              <button
                class="w-full flex items-center text-left p-3 rounded-lg hover:bg-gray-100"
              >
                <span class="iconify mr-3" data-icon="mdi:vr"></span>
                AI面试
              </button>
            </div>
          </div>

          <div class="mb-10">
            <h3 class="text-[16px] font-semibold text-[#1A1F36] mb-4">
              实时数据
            </h3>
            <div class="space-y-4">
              <div>
                <div class="flex justify-between text-sm text-[#8F95A3]">
                  <span>今日评估数</span>
                  <span>87</span>
                </div>
                <div class="mt-1 w-full bg-gray-200 rounded h-2">
                  <div class="progress-bar" style="width: 75%"></div>
                </div>
              </div>
              <div>
                <div class="flex justify-between text-sm text-[#8F95A3]">
                  <span>完成率</span>
                  <span>92%</span>
                </div>
                <div class="mt-1 w-full bg-gray-200 rounded h-2">
                  <div class="progress-bar" style="width: 92%"></div>
                </div>
              </div>
              <div>
                <div class="flex justify-between text-sm text-[#8F95A3]">
                  <span>平均得分</span>
                  <span>8.4</span>
                </div>
                <div class="mt-1 w-full bg-gray-200 rounded h-2">
                  <div class="progress-bar" style="width: 84%"></div>
                </div>
              </div>
            </div>
          </div>

          <div class="flex-1">
            <h3 class="text-[16px] font-semibold text-[#1A1F36] mb-4">
              快捷操作
            </h3>
            <div class="space-y-3">
              <button
                class="w-full bg-[#2D5BFF] text-white h-11 rounded-lg flex items-center justify-center font-medium"
              >
                <span class="iconify mr-2" data-icon="mdi:plus"></span>
                新建需求
              </button>
              <button
                class="w-full border border-[#2D5BFF] text-[#2D5BFF] h-11 rounded-lg flex items-center justify-center font-medium"
              >
                <span
                  class="iconify mr-2"
                  data-icon="mdi:database-import"
                ></span>
                批量导入
              </button>
              <button
                class="w-full border border-gray-300 text-[#4A4F5F] h-11 rounded-lg flex items-center justify-center font-medium"
              >
                <span
                  class="iconify mr-2"
                  data-icon="mdi:file-document-outline"
                ></span>
                报告生成
              </button>
            </div>
          </div>
        </aside>

        <!-- 主内容 -->
        <main class="flex-1 overflow-y-auto p-8">
          <div class="mb-6">
            <h1 class="text-[28px] font-bold text-[#1A1F36]">
              企业人才评估与培养系统
            </h1>
            <p class="text-[#4A4F5F] mt-2">
              <span
                class="iconify align-middle text-[#00C48C]"
                data-icon="mdi:shield-check-outline"
              ></span>
              <span class="align-middle ml-1"
                >AI模型更新于2025年11月4日 |
                新增需求分析、学习路径与项目测试功能</span
              >
            </p>
          </div>

          <!-- 功能导航 -->
          <div class="flex space-x-4 mb-8">
            <div class="tab-button active" data-tab="tab1">需求分析</div>
            <div class="tab-button" data-tab="tab2">学习路径</div>
            <div class="tab-button" data-tab="tab3">项目测试</div>
            <div class="tab-button" data-tab="tab4">AI面试</div>
          </div>

          <!-- 需求分析模块 -->
          <div id="tab1" class="tab-content active">
            <div class="grid grid-cols-2 gap-8 mb-8">
              <!-- 需求输入与结构化分析 -->
              <div class="card feature-card">
                <div class="flex items-center mb-4">
                  <span
                    class="iconify text-2xl text-[#2D5BFF] mr-3"
                    data-icon="mdi:file-document-edit-outline"
                  ></span>
                  <h2 class="text-xl font-semibold text-[#1A1F36]">
                    需求输入与结构化分析
                  </h2>
                </div>
                <p class="text-[#4A4F5F] mb-4">
                  将企业的原始需求标准化、清晰化，基于企业输入的信息，利用AI算法生成标准化需求报告。
                </p>

                <div class="mb-4">
                  <h3 class="font-medium text-[#1A1F36] mb-2">当前需求分析</h3>
                  <div class="bg-gray-50 p-3 rounded-lg">
                    <div class="flex justify-between mb-2">
                      <span class="text-sm text-[#4A4F5F]"
                        >岗位：高级前端工程师</span
                      >
                      <span
                        class="text-xs bg-[#00C48C] text-white px-2 py-1 rounded"
                        >进行中</span
                      >
                    </div>
                    <div class="text-sm text-[#4A4F5F]">
                      <p>• 技能点：React, Vue, TypeScript, Webpack</p>
                      <p>• 项目类型：电商平台开发</p>
                      <p>• 评估标准：代码质量、性能优化、团队协作</p>
                    </div>
                  </div>
                </div>

                <button
                  class="w-full bg-[#2D5BFF] text-white h-10 rounded-lg flex items-center justify-center font-medium mt-4"
                >
                  <span class="iconify mr-2" data-icon="mdi:plus"></span>
                  新建需求分析
                </button>
              </div>

              <!-- 技能点分析 -->
              <div class="card feature-card">
                <div class="flex items-center mb-4">
                  <span
                    class="iconify text-2xl text-[#2D5BFF] mr-3"
                    data-icon="mdi:chart-box-outline"
                  ></span>
                  <h2 class="text-xl font-semibold text-[#1A1F36]">
                    技能点分析
                  </h2>
                </div>
                <p class="text-[#4A4F5F] mb-4">
                  AI根据岗位需求自动识别关键技能点并生成评估标准。
                </p>

                <div class="space-y-3">
                  <div>
                    <div class="flex justify-between mb-1">
                      <span class="text-sm font-medium">React框架掌握</span>
                      <span class="text-sm text-[#4A4F5F]">85%</span>
                    </div>
                    <div class="w-full bg-gray-200 rounded-full h-2">
                      <div
                        class="bg-[#2D5BFF] h-2 rounded-full"
                        style="width: 85%"
                      ></div>
                    </div>
                  </div>

                  <div>
                    <div class="flex justify-between mb-1">
                      <span class="text-sm font-medium">TypeScript应用</span>
                      <span class="text-sm text-[#4A4F5F]">78%</span>
                    </div>
                    <div class="w-full bg-gray-200 rounded-full h-2">
                      <div
                        class="bg-[#2D5BFF] h-2 rounded-full"
                        style="width: 78%"
                      ></div>
                    </div>
                  </div>

                  <div>
                    <div class="flex justify-between mb-1">
                      <span class="text-sm font-medium">性能优化能力</span>
                      <span class="text-sm text-[#4A4F5F]">72%</span>
                    </div>
                    <div class="w-full bg-gray-200 rounded-full h-2">
                      <div
                        class="bg-[#2D5BFF] h-2 rounded-full"
                        style="width: 72%"
                      ></div>
                    </div>
                  </div>
                </div>

                <button
                  class="w-full border border-[#2D5BFF] text-[#2D5BFF] h-10 rounded-lg flex items-center justify-center font-medium mt-4"
                >
                  查看详细报告
                </button>
              </div>
            </div>
          </div>

          <!-- 学习路径模块 -->
          <div id="tab2" class="tab-content hidden">
            <div class="grid grid-cols-2 gap-8 mb-8">
              <!-- 学习路线设计 -->
              <div class="card feature-card">
                <div class="flex items-center mb-4">
                  <span
                    class="iconify text-2xl text-[#2D5BFF] mr-3"
                    data-icon="mdi:road-variant"
                  ></span>
                  <h2 class="text-xl font-semibold text-[#1A1F36]">
                    企业学习路线设计
                  </h2>
                </div>
                <p class="text-[#4A4F5F] mb-4">
                  将企业内部的技术栈、开发规范和业务需求转化为条理清晰的学习路径。
                </p>

                <div class="mb-4">
                  <h3 class="font-medium text-[#1A1F36] mb-2">
                    前端开发学习路径
                  </h3>
                  <div class="space-y-3">
                    <div class="timeline-item">
                      <h4 class="font-medium">阶段一：基础技能 (4周)</h4>
                      <p class="text-sm text-[#4A4F5F]">
                        HTML5, CSS3, JavaScript基础
                      </p>
                    </div>
                    <div class="timeline-item">
                      <h4 class="font-medium">阶段二：框架应用 (6周)</h4>
                      <p class="text-sm text-[#4A4F5F]">
                        React/Vue框架，状态管理，路由
                      </p>
                    </div>
                    <div class="timeline-item">
                      <h4 class="font-medium">阶段三：工程化 (4周)</h4>
                      <p class="text-sm text-[#4A4F5F]">
                        Webpack, Git, 单元测试，CI/CD
                      </p>
                    </div>
                    <div class="timeline-item">
                      <h4 class="font-medium">阶段四：项目实战 (6周)</h4>
                      <p class="text-sm text-[#4A4F5F]">
                        企业级项目开发，团队协作
                      </p>
                    </div>
                  </div>
                </div>

                <button
                  class="w-full bg-[#2D5BFF] text-white h-10 rounded-lg flex items-center justify-center font-medium"
                >
                  定制学习路径
                </button>
              </div>

              <!-- 学习进度追踪 -->
              <div class="card feature-card">
                <div class="flex items-center mb-4">
                  <span
                    class="iconify text-2xl text-[#2D5BFF] mr-3"
                    data-icon="mdi:progress-check"
                  ></span>
                  <h2 class="text-xl font-semibold text-[#1A1F36]">
                    学习进度追踪
                  </h2>
                </div>
                <p class="text-[#4A4F5F] mb-4">
                  实时追踪学员在各学习阶段的进度和掌握情况。
                </p>

                <div class="space-y-4">
                  <div class="flex items-center">
                    <div
                      class="w-10 h-10 rounded-full bg-[#E6F7FF] flex items-center justify-center mr-3"
                    >
                      <span class="text-[#2D5BFF] font-bold">张</span>
                    </div>
                    <div class="flex-1">
                      <div class="flex justify-between mb-1">
                        <span class="font-medium">张明</span>
                        <span class="text-sm text-[#4A4F5F]">65%</span>
                      </div>
                      <div class="w-full bg-gray-200 rounded-full h-2">
                        <div
                          class="bg-[#00C48C] h-2 rounded-full"
                          style="width: 65%"
                        ></div>
                      </div>
                    </div>
                  </div>

                  <div class="flex items-center">
                    <div
                      class="w-10 h-10 rounded-full bg-[#F0F5FF] flex items-center justify-center mr-3"
                    >
                      <span class="text-[#2D5BFF] font-bold">李</span>
                    </div>
                    <div class="flex-1">
                      <div class="flex justify-between mb-1">
                        <span class="font-medium">李思</span>
                        <span class="text-sm text-[#4A4F5F]">42%</span>
                      </div>
                      <div class="w-full bg-gray-200 rounded-full h-2">
                        <div
                          class="bg-[#FF9F00] h-2 rounded-full"
                          style="width: 42%"
                        ></div>
                      </div>
                    </div>
                  </div>

                  <div class="flex items-center">
                    <div
                      class="w-10 h-10 rounded-full bg-[#F6FFED] flex items-center justify-center mr-3"
                    >
                      <span class="text-[#52C41A] font-bold">王</span>
                    </div>
                    <div class="flex-1">
                      <div class="flex justify-between mb-1">
                        <span class="font-medium">王华</span>
                        <span class="text-sm text-[#4A4F5F]">88%</span>
                      </div>
                      <div class="w-full bg-gray-200 rounded-full h-2">
                        <div
                          class="bg-[#52C41A] h-2 rounded-full"
                          style="width: 88%"
                        ></div>
                      </div>
                    </div>
                  </div>
                </div>

                <button
                  class="w-full border border-[#2D5BFF] text-[#2D5BFF] h-10 rounded-lg flex items-center justify-center font-medium mt-4"
                >
                  查看全部进度
                </button>
              </div>
            </div>
          </div>

          <!-- 项目测试模块 -->
          <div id="tab3" class="tab-content hidden">
            <div class="grid grid-cols-2 gap-8 mb-8">
              <!-- 实际项目应用 -->
              <div class="card feature-card">
                <div class="flex items-center mb-4">
                  <span
                    class="iconify text-2xl text-[#2D5BFF] mr-3"
                    data-icon="mdi:application-brackets-outline"
                  ></span>
                  <h2 class="text-xl font-semibold text-[#1A1F36]">
                    实际项目应用
                  </h2>
                </div>
                <p class="text-[#4A4F5F] mb-4">
                  让学生接触到真实或高度仿真的业务场景项目，评估其将理论知识转化为实际产出的能力。
                </p>

                <div class="space-y-4">
                  <div class="project-card p-4 border rounded-lg">
                    <div class="flex justify-between items-start mb-2">
                      <h3 class="font-medium">电商平台前端开发</h3>
                      <span
                        class="text-xs bg-[#2D5BFF] text-white px-2 py-1 rounded"
                        >进行中</span
                      >
                    </div>
                    <p class="text-sm text-[#4A4F5F] mb-3">
                      基于React+TypeScript开发电商平台前端，包含商品展示、购物车、订单管理等功能。
                    </p>
                    <div class="flex flex-wrap">
                      <span class="skill-tag">React</span>
                      <span class="skill-tag">TypeScript</span>
                      <span class="skill-tag">Redux</span>
                      <span class="skill-tag">Ant Design</span>
                    </div>
                  </div>

                  <div class="project-card p-4 border rounded-lg">
                    <div class="flex justify-between items-start mb-2">
                      <h3 class="font-medium">数据可视化仪表板</h3>
                      <span
                        class="text-xs bg-[#00C48C] text-white px-2 py-1 rounded"
                        >已完成</span
                      >
                    </div>
                    <p class="text-sm text-[#4A4F5F] mb-3">
                      使用ECharts开发企业数据可视化仪表板，支持多维度数据分析和图表展示。
                    </p>
                    <div class="flex flex-wrap">
                      <span class="skill-tag">Vue.js</span>
                      <span class="skill-tag">ECharts</span>
                      <span class="skill-tag">Axios</span>
                    </div>
                  </div>
                </div>

                <button
                  class="w-full bg-[#2D5BFF] text-white h-10 rounded-lg flex items-center justify-center font-medium mt-4"
                >
                  查看全部项目
                </button>
              </div>

              <!-- 线上实际项目测试 -->
              <div class="card feature-card">
                <div class="flex items-center mb-4">
                  <span
                    class="iconify text-2xl text-[#2D5BFF] mr-3"
                    data-icon="mdi:timer-sand"
                  ></span>
                  <h2 class="text-xl font-semibold text-[#1A1F36]">
                    线上实际项目测试
                  </h2>
                </div>
                <p class="text-[#4A4F5F] mb-4">
                  通过学生限时完成真实项目任务的方式，综合评估技术应用、问题解决、时间管理和抗压能力。
                </p>

                <div class="space-y-4">
                  <div class="p-4 border rounded-lg">
                    <div class="flex justify-between items-center mb-2">
                      <h3 class="font-medium">React组件开发测试</h3>
                      <span class="text-xs text-[#4A4F5F]">限时: 2小时</span>
                    </div>
                    <p class="text-sm text-[#4A4F5F] mb-3">
                      开发一个可复用的数据表格组件，支持排序、筛选和分页功能。
                    </p>
                    <div class="flex justify-between items-center">
                      <span class="text-sm text-[#4A4F5F]">参与人数: 24人</span>
                      <span class="text-sm text-[#4A4F5F]">平均分: 7.8/10</span>
                    </div>
                  </div>

                  <div class="p-4 border rounded-lg">
                    <div class="flex justify-between items-center mb-2">
                      <h3 class="font-medium">性能优化挑战</h3>
                      <span class="text-xs text-[#4A4F5F]">限时: 3小时</span>
                    </div>
                    <p class="text-sm text-[#4A4F5F] mb-3">
                      对一个现有网站进行性能分析和优化，要求提升加载速度和交互流畅度。
                    </p>
                    <div class="flex justify-between items-center">
                      <span class="text-sm text-[#4A4F5F]">参与人数: 18人</span>
                      <span class="text-sm text-[#4A4F5F]">平均分: 8.2/10</span>
                    </div>
                  </div>
                </div>

                <button
                  class="w-full border border-[#2D5BFF] text-[#2D5BFF] h-10 rounded-lg flex items-center justify-center font-medium mt-4"
                >
                  创建新测试
                </button>
              </div>
            </div>
          </div>

          <!-- AI面试模块 -->
          <div id="tab4" class="tab-content hidden">
            <div class="grid grid-cols-2 gap-8 mb-8">
              <!-- 线上AI面试 -->
              <div class="card feature-card">
                <div class="flex items-center mb-4">
                  <span
                    class="iconify text-2xl text-[#2D5BFF] mr-3"
                    data-icon="mdi:robot-outline"
                  ></span>
                  <h2 class="text-xl font-semibold text-[#1A1F36]">
                    线上AI面试
                  </h2>
                </div>
                <p class="text-[#4A4F5F] mb-4">
                  高效评估候选人的技术深度、沟通表达能力、逻辑思维等软技能，优化面试流程。
                </p>

                <div class="space-y-4">
                  <div class="p-4 border rounded-lg">
                    <div class="flex items-center mb-3">
                      <div class="interview-avatar mr-3">张</div>
                      <div>
                        <h3 class="font-medium">张明</h3>
                        <p class="text-sm text-[#4A4F5F]">
                          申请职位: 高级前端工程师
                        </p>
                      </div>
                      <span
                        class="ml-auto text-xs bg-[#2D5BFF] text-white px-2 py-1 rounded"
                        >待面试</span
                      >
                    </div>
                    <div class="flex justify-between text-sm text-[#4A4F5F]">
                      <span>计划时间: 11月6日 14:00</span>
                      <span>预计时长: 45分钟</span>
                    </div>
                  </div>

                  <div class="p-4 border rounded-lg">
                    <div class="flex items-center mb-3">
                      <div class="interview-avatar mr-3">李</div>
                      <div>
                        <h3 class="font-medium">李思</h3>
                        <p class="text-sm text-[#4A4F5F]">申请职位: 产品经理</p>
                      </div>
                      <span
                        class="ml-auto text-xs bg-[#00C48C] text-white px-2 py-1 rounded"
                        >已完成</span
                      >
                    </div>
                    <div class="flex justify-between text-sm text-[#4A4F5F]">
                      <span>面试时间: 11月4日 10:30</span>
                      <span>综合评分: 8.7/10</span>
                    </div>
                  </div>
                </div>

                <button
                  class="w-full bg-[#2D5BFF] text-white h-10 rounded-lg flex items-center justify-center font-medium mt-4"
                >
                  安排AI面试
                </button>
              </div>

              <!-- 面试分析报告 -->
              <div class="card feature-card">
                <div class="flex items-center mb-4">
                  <span
                    class="iconify text-2xl text-[#2D5BFF] mr-3"
                    data-icon="mdi:chart-box-multiple-outline"
                  ></span>
                  <h2 class="text-xl font-semibold text-[#1A1F36]">
                    面试分析报告
                  </h2>
                </div>
                <p class="text-[#4A4F5F] mb-4">
                  AI生成的详细面试分析报告，包含技术能力、沟通表达、逻辑思维等多维度评估。
                </p>

                <div class="space-y-4">
                  <div>
                    <div class="flex justify-between mb-1">
                      <span class="text-sm font-medium">技术深度</span>
                      <span class="text-sm text-[#4A4F5F]">8.9/10</span>
                    </div>
                    <div class="w-full bg-gray-200 rounded-full h-2">
                      <div
                        class="bg-[#2D5BFF] h-2 rounded-full"
                        style="width: 89%"
                      ></div>
                    </div>
                  </div>

                  <div>
                    <div class="flex justify-between mb-1">
                      <span class="text-sm font-medium">沟通表达</span>
                      <span class="text-sm text-[#4A4F5F]">8.2/10</span>
                    </div>
                    <div class="w-full bg-gray-200 rounded-full h-2">
                      <div
                        class="bg-[#2D5BFF] h-2 rounded-full"
                        style="width: 82%"
                      ></div>
                    </div>
                  </div>

                  <div>
                    <div class="flex justify-between mb-1">
                      <span class="text-sm font-medium">逻辑思维</span>
                      <span class="text-sm text-[#4A4F5F]">9.1/10</span>
                    </div>
                    <div class="w-full bg-gray-200 rounded-full h-2">
                      <div
                        class="bg-[#2D5BFF] h-2 rounded-full"
                        style="width: 91%"
                      ></div>
                    </div>
                  </div>

                  <div>
                    <div class="flex justify-between mb-1">
                      <span class="text-sm font-medium">团队协作</span>
                      <span class="text-sm text-[#4A4F5F]">7.8/10</span>
                    </div>
                    <div class="w-full bg-gray-200 rounded-full h-2">
                      <div
                        class="bg-[#2D5BFF] h-2 rounded-full"
                        style="width: 78%"
                      ></div>
                    </div>
                  </div>
                </div>

                <button
                  class="w-full border border-[#2D5BFF] text-[#2D5BFF] h-10 rounded-lg flex items-center justify-center font-medium mt-4"
                >
                  查看详细报告
                </button>
              </div>
            </div>
          </div>

          <!-- 新增招聘卡片 -->
          <div class="card mb-8">
            <div class="flex justify-between items-center mb-6">
              <h2 class="text-[20px] font-semibold text-[#1A1F36]">
                招聘需求概览
              </h2>
              <span class="ai-tag">
                <span
                  class="iconify mr-1"
                  data-icon="mdi:briefcase-outline"
                ></span>
                实时更新
              </span>
            </div>
            <div class="grid grid-cols-3 gap-4">
              <div class="text-center p-4 bg-blue-50 rounded-lg">
                <div class="text-2xl font-bold text-[#2D5BFF]">12</div>
                <div class="text-sm text-[#4A4F5F]">进行中岗位</div>
              </div>
              <div class="text-center p-4 bg-green-50 rounded-lg">
                <div class="text-2xl font-bold text-[#00C48C]">8</div>
                <div class="text-sm text-[#4A4F5F]">待面试</div>
              </div>
              <div class="text-center p-4 bg-orange-50 rounded-lg">
                <div class="text-2xl font-bold text-[#FF9F00]">3</div>
                <div class="text-sm text-[#4A4F5F]">紧急招聘</div>
              </div>
            </div>
            <div class="mt-4 flex space-x-3">
              <button
                class="flex-1 bg-[#2D5BFF] text-white py-2 rounded-lg text-sm font-medium"
              >
                查看全部岗位
              </button>
              <button
                class="flex-1 border border-[#2D5BFF] text-[#2D5BFF] py-2 rounded-lg text-sm font-medium"
              >
                新建招聘需求
              </button>
            </div>
          </div>

          <!-- 评估进度 -->
          <div class="card mb-8">
            <div class="flex justify-between items-center mb-6">
              <h2 class="text-[20px] font-semibold text-[#1A1F36]">
                评估进度追踪
              </h2>
              <div class="flex space-x-4">
                <span class="ai-tag">
                  <span
                    class="iconify mr-1"
                    data-icon="carbon:ai-status-complete"
                  ></span>
                  AI实时更新
                </span>
                <button class="text-[#2D5BFF] flex items-center">
                  <span class="iconify mr-1" data-icon="mdi:refresh"></span>
                  刷新
                </button>
              </div>
            </div>
            <div class="flex space-x-4 overflow-x-auto pb-4">
              <div class="flex-shrink-0 w-64 card">
                <div class="flex justify-between mb-3">
                  <h3 class="font-medium text-[#1A1F36]">高级前端工程师</h3>
                  <span
                    class="px-2 py-1 bg-[#00C48C]/10 text-[#00C48C] rounded text-xs"
                    >进行中</span
                  >
                </div>
                <div class="text-sm text-[#8F95A3] mb-4">
                  <div class="flex justify-between">
                    <span>候选人: 张明</span>
                    <span>阶段 2/4</span>
                  </div>
                  <div class="mt-1 bg-gray-200 rounded h-2">
                    <div class="progress-bar" style="width: 50%"></div>
                  </div>
                </div>
                <div class="flex">
                  <div class="flex-1">
                    <p class="text-xs text-[#8F95A3]">开始时间</p>
                    <p class="text-sm">11月4日 09:30</p>
                  </div>
                  <div class="flex-1">
                    <p class="text-xs text-[#8F95A3]">预估完成</p>
                    <p class="text-sm">11月5日 14:00</p>
                  </div>
                </div>
              </div>
              <div class="flex-shrink-0 w-64 card">
                <div class="flex justify-between mb-3">
                  <h3 class="font-medium text-[#1A1F36]">产品总监</h3>
                  <span
                    class="px-2 py-1 bg-[#FF9F00]/10 text-[#FF9F00] rounded text-xs"
                    >待审核</span
                  >
                </div>
                <div class="text-sm text-[#8F95A3] mb-4">
                  <div class="flex justify-between">
                    <span>候选人: 李思</span>
                    <span>阶段 4/4</span>
                  </div>
                  <div class="mt-1 bg-gray-200 rounded h-2">
                    <div class="progress-bar" style="width: 100%"></div>
                  </div>
                </div>
                <div class="flex">
                  <div class="flex-1">
                    <p class="text-xs text-[#8F95A3]">完成时间</p>
                    <p class="text-sm">11月3日 16:45</p>
                  </div>
                  <div class="flex-1">
                    <p class="text-xs text-[#8F95A3]">匹配分数</p>
                    <p class="text-sm">8.7/10</p>
                  </div>
                </div>
              </div>
              <div class="flex-shrink-0 w-64 card">
                <div class="flex justify-between mb-3">
                  <h3 class="font-medium text-[#1A1F36]">AI算法专家</h3>
                  <span
                    class="px-2 py-1 bg-[#2D5BFF]/10 text-[#2D5BFF] rounded text-xs"
                    >准备中</span
                  >
                </div>
                <div class="text-sm text-[#8F95A3] mb-4">
                  <div class="flex justify-between">
                    <span>候选人: 王华</span>
                    <span>阶段 0/4</span>
                  </div>
                  <div class="mt-1 bg-gray-200 rounded h-2">
                    <div class="progress-bar" style="width: 0%"></div>
                  </div>
                </div>
                <div class="flex">
                  <div class="flex-1">
                    <p class="text-xs text-[#8F95A3]">计划开始</p>
                    <p class="text-sm">11月5日 10:00</p>
                  </div>
                  <div class="flex-1">
                    <p class="text-xs text-[#8F95A3]">面试准备</p>
                    <p class="text-sm text-[#00C48C]">已完成</p>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 智能推荐 -->
          <div class="grid grid-cols-2 gap-8 mb-8">
            <!-- 推荐模块 -->
            <div class="card">
              <div class="flex justify-between items-center mb-6">
                <h2 class="text-[20px] font-semibold text-[#1A1F36]">
                  智能推荐候选人
                </h2>
                <span class="ai-tag">
                  <span
                    class="iconify mr-1"
                    data-icon="carbon:ai-results-high"
                  ></span>
                  AI匹配
                </span>
              </div>
              <div class="space-y-4">
                <div
                  class="flex items-center justify-between p-3 hover:bg-gray-50 rounded-lg"
                >
                  <div class="flex items-center">
                    <div
                      class="bg-gray-200 border-2 border-dashed rounded-xl w-12 h-12"
                    ></div>
                    <div class="ml-3">
                      <h3 class="font-medium text-[#1A1F36]">陈晓</h3>
                      <p class="text-sm text-[#8F95A3]">
                        高级UX设计师 | 5年经验
                      </p>
                    </div>
                  </div>
                  <div>
                    <div class="text-[20px] font-bold text-[#00C48C]">
                      9.2<span class="text-sm"></span>
                    </div>
                    <p class="text-[12px] text-[#8F95A3]">匹配度</p>
                  </div>
                </div>

                <div
                  class="flex items-center justify-between p-3 hover:bg-gray-50 rounded-lg"
                >
                  <div class="flex items-center">
                    <div
                      class="bg-gray-200 border-2 border-dashed rounded-xl w-12 h-12"
                    ></div>
                    <div class="ml-3">
                      <h3 class="font-medium text-[#1A1F36]">刘阳</h3>
                      <p class="text-sm text-[#8F95A3]">技术负责人 | 8年经验</p>
                    </div>
                  </div>
                  <div>
                    <div class="text-[20px] font-bold">
                      8.7<span class="text-sm"></span>
                    </div>
                    <p class="text-[12px] text-[#8F95A3]">匹配度</p>
                  </div>
                </div>

                <div
                  class="flex items-center justify-between p-3 hover:bg-gray-50 rounded-lg"
                >
                  <div class="flex items-center">
                    <div
                      class="bg-gray-200 border-2 border-dashed rounded-xl w-12 h-12"
                    ></div>
                    <div class="ml-3">
                      <h3 class="font-medium text-[#1A1F36]">赵婷婷</h3>
                      <p class="text-sm text-[#8F95A3]">产品经理 | 数据驱动</p>
                    </div>
                  </div>
                  <div>
                    <div class="text-[20px] font-bold text-[#FF9F00]">
                      7.9<span class="text-sm"></span>
                    </div>
                    <p class="text-[12px] text-[#8F95A3]">匹配度</p>
                  </div>
                </div>
              </div>

              <div class="mt-6">
                <button
                  class="w-full border border-[#2D5BFF] text-[#2D5BFF] h-11 rounded-lg flex items-center justify-center font-medium"
                >
                  查看全部推荐
                  <span
                    class="iconify ml-2"
                    data-icon="mdi:chevron-right"
                  ></span>
                </button>
              </div>
            </div>

            <!-- 图表区域 -->
            <div>
              <!-- 柱状图 -->
              <div class="card mb-6">
                <div class="flex justify-between items-center mb-6">
                  <h2 class="text-[20px] font-semibold text-[#1A1F36]">
                    技能评估分布
                  </h2>
                  <div class="flex items-center">
                    <span class="text-sm text-[#4A4F5F]">近30天</span>
                    <span
                      class="iconify ml-2 text-[#2D5BFF]"
                      data-icon="mdi:chevron-down"
                    ></span>
                  </div>
                </div>
                <div class="chart-container">
                  <div id="kpi-chart"></div>
                </div>
              </div>
              <!-- 雷达图 -->
              <div class="card">
                <h2 class="text-[20px] font-semibold text-[#1A1F36] mb-6">
                  岗位能力分析
                </h2>
                <div class="chart-container">
                  <div id="radar-chart"></div>
                </div>
              </div>
            </div>
          </div>

          <!-- 热力图 -->
          <div class="card">
            <div class="flex justify-between items-center mb-6">
              <h2 class="text-[20px] font-semibold text-[#1A1F36]">
                评估时段热力图
              </h2>
              <div class="ai-tag">
                <span class="iconify mr-1" data-icon="mdi:clock-fast"></span>
                实时更新
              </div>
            </div>
            <div class="chart-container">
              <div id="heatmap-chart"></div>
            </div>
          </div>
        </main>
      </div>

      <!-- 底部状态栏 -->
      <footer
        class="fixed-section bg-[#1A1F36] text-white h-10 flex items-center px-8 text-sm"
      >
        <div class="w-full flex justify-between items-center">
          <div class="flex items-center space-x-6">
            <div class="flex items-center">
              <span class="w-2 h-2 rounded-full bg-[#00C48C] mr-2"></span>
              <span>系统在线</span>
            </div>
            <div class="flex items-center">
              <span
                class="iconify text-green-400 mr-2"
                data-icon="mdi:sync"
              ></span>
              <span>数据同步中 (92%)</span>
            </div>
            <div>
              <span class="text-[#8F95A3]">DeepSeek-R1模型 | 长上下文支持</span>
            </div>
          </div>
          <div>© 2025 AI Talent Pro 企业版 | 深度求索技术提供</div>
        </div>
      </footer>
    </div>

    <script>
      document.addEventListener("DOMContentLoaded", function () {
        // KPI柱状图
        const kpiChart = echarts.init(document.getElementById("kpi-chart"));
        const kpiOption = {
          tooltip: {
            trigger: "axis",
            axisPointer: { type: "shadow" },
          },
          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true,
          },
          xAxis: {
            type: "category",
            data: [
              "技术能力",
              "沟通协作",
              "领导力",
              "创新思维",
              "行业知识",
              "问题解决",
            ],
            axisLine: { show: false },
            axisTick: { show: false },
          },
          yAxis: {
            type: "value",
            max: 10,
            splitLine: { lineStyle: { type: "dashed" } },
          },
          series: [
            {
              name: "平均分",
              type: "bar",
              barWidth: "24px",
              itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "#2D5BFF" },
                  { offset: 1, color: "#00C48C" },
                ]),
              },
              data: [8.7, 7.2, 9.1, 8.3, 7.8, 8.5],
            },
          ],
        };
        kpiChart.setOption(kpiOption);

        // 雷达图
        const radarChart = echarts.init(document.getElementById("radar-chart"));
        const radarOption = {
          tooltip: { trigger: "item" },
          radar: {
            indicator: [
              { name: "战略规划", max: 100 },
              { name: "团队管理", max: 100 },
              { name: "技术洞察", max: 100 },
              { name: "商业敏感度", max: 100 },
              { name: "产品思维", max: 100 },
            ],
            splitArea: { show: false },
            axisName: { color: "#4A4F5F" },
          },
          series: [
            {
              type: "radar",
              data: [
                {
                  value: [86, 92, 78, 90, 84],
                  name: "理想模型",
                  symbol: "circle",
                  symbolSize: 8,
                  lineStyle: { width: 2 },
                  areaStyle: {
                    color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
                      { offset: 0, color: "rgba(45, 91, 255, 0.3)" },
                      { offset: 1, color: "rgba(45, 91, 255, 0.1)" },
                    ]),
                  },
                },
              ],
            },
          ],
        };
        radarChart.setOption(radarOption);

        // 热力图
        const heatmapChart = echarts.init(
          document.getElementById("heatmap-chart")
        );
        const heatmapOption = {
          tooltip: { position: "top" },
          grid: { height: "80%" },
          xAxis: {
            type: "category",
            data: ["周一", "周二", "周三", "周四", "周五"],
            splitArea: { show: true },
          },
          yAxis: {
            type: "category",
            data: ["8:00", "10:00", "12:00", "14:00", "16:00", "18:00"],
            splitArea: { show: true },
          },
          visualMap: {
            min: 0,
            max: 12,
            calculable: true,
            orient: "horizontal",
            top: "top",
            left: "center",
            inRange: {
              color: ["#F7F9FC", "#E6F7FF", "#D6E4FF", "#ADC6FF", "#2D5BFF"],
            },
          },
          series: [
            {
              name: "评估数量",
              type: "heatmap",
              data: [
                [0, 0, 5],
                [0, 1, 3],
                [0, 2, 7],
                [0, 3, 10],
                [0, 4, 8],
                [1, 0, 6],
                [1, 1, 4],
                [1, 2, 8],
                [1, 3, 12],
                [1, 4, 7],
                [2, 0, 3],
                [2, 1, 2],
                [2, 2, 6],
                [2, 3, 9],
                [2, 4, 11],
                [3, 0, 8],
                [3, 1, 7],
                [3, 2, 10],
                [3, 3, 6],
                [3, 4, 4],
                [4, 0, 9],
                [4, 1, 5],
                [4, 2, 11],
                [4, 3, 8],
                [4, 4, 6],
              ],
              label: { show: true, color: "#1A1F36" },
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowColor: "rgba(0, 0, 0, 0.5)",
                },
              },
            },
          ],
        };
        heatmapChart.setOption(heatmapOption);

        // 响应窗口调整
        window.addEventListener("resize", function () {
          kpiChart.resize();
          radarChart.resize();
          heatmapChart.resize();
        });

        // 标签切换功能
        const tabButtons = document.querySelectorAll(".tab-button");
        const tabContents = document.querySelectorAll(".tab-content");

        tabButtons.forEach((button) => {
          button.addEventListener("click", () => {
            const tabId = button.getAttribute("data-tab");

            // 移除所有活动状态
            tabButtons.forEach((btn) => btn.classList.remove("active"));
            tabContents.forEach((content) =>
              content.classList.remove("active")
            );

            // 添加当前活动状态
            button.classList.add("active");
            document.getElementById(tabId).classList.add("active");
          });
        });
      });
    </script>
  </body>
</html>
